<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>我要出租</title>
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="plugins/bootstrap-select/css/bootstrap-select.min.css"/>
    <link rel="stylesheet" href="plugins/bootstrap-fileupload/fileinput.min.css"/>
    <link rel="stylesheet" href="plugins/iCheck"/>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/all.css"/>
    <link rel="stylesheet" href="css/mui.min.css"/>
    <link rel="stylesheet" href="css/loaders.min.css"/>
    <link rel="stylesheet" href="css/loading.css"/>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="plugins/slick/slick.css"/>

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/house.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/house.ico">
    <link rel="apple-touch-icon-precomposed" sizes="512x512" href="images/house.ico">
    <link rel="shortcut icon" href="images/house.ico">
    <style>
        .add-img {
            display: block;
            width: 100px;
            height: 95px;
            margin-top: 10px;
            position: relative;
            background-color: #E5E5E5;
            line-height: 4rem;
            text-align: center;
            color: #b3b3b3;
            font-size: 5rem;
            float: left;
            margin-left: 5%;
        }

        .add-img input {
            display: block;
            width: 5rem;
            height: 5rem;
            position: absolute;
            top: 0rem;
            left: 0rem;
            opacity: 0;
        }
    </style>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<div class="headertwo clearfloat" id="header">
    <p class="title">我要出租</p>
</div>

<div class="clearfloat main" id="main">
    <div class="lease clearfloat">
        <div class="top clearfloat box-s">
            <i class="iconfont icon-gonggao fl"></i>
            <span class="fl box-s">请填认证写您的房源信息，审核通过后会发布上架！</span>
        </div>
        <div class="land-ctent land-ctenttwo clearfloat">
            <ul>
                <li class="box-s clearfloat">
                    <div class="fr col-sm-12 col-md-12">
                        <a href="javascript:void(0)" class="add-img">+
                            <input type="file" name="file" id="file" multiple="multiple"/>
                        </a>
                    </div>
                    <div class="file-preview "></div>
                    <!--                    <div class="col-sm-8 col-md-8 horizontal-list">
                                            <ul>
                                                <li>
                                                    <img id="img_src0" class="" src="images/imgadd.png">
                                                </li>
                                                <li>
                                                    <img id="img_src1" class="" src="images/imgadd.png">
                                                </li>
                                            </ul>
                                        </div>-->
                </li>
                <li class="box-s clearfloat">
                    <p class="tit fl">您的姓名</p>
                    <input type="text" name="" id="" value="" placeholder="我们如何称呼您" class="fl"/>
                </li>
                <li class="box-s clearfloat">
                    <p class="tit fl">手机号码</p>
                    <input type="text" name="" id="" value="" placeholder="我们会及时和您取得联系" class="fl"/>
                </li>
                <li class="box-s clearfloat">
                    <p class="tit fl">库房位置</p>
                    <input type="text" name="" id="" value="" placeholder="请输入库房位置" class="fl"/>
                </li>
                <li class="box-s clearfloat">
                    <p class="tit fl">库房面积</p>
                    <input type="text" name="" id="" value="" placeholder="请输入库房面积" class="fl"/>
                </li>
                <li class="box-s clearfloat">
                    <p class="tit fl">意向租金</p>
                    <input type="text" name="" id="" value="" placeholder="例如5000" class="fl"/>
                </li>
                <li class="box-s clearfloat form-group">
                    <p class="tit fl col-sm-2">库房类型</p>
                    <div class="select-group fr col-sm-8 col-md-8 ">
                        <select class="form-control selectpicker">
                            <option>普通库</option>
                            <option>冷冻库</option>
                        </select>
                    </div>
                </li>
                <li class="box-s clearfloat form-group">
                    <p class="tit fl col-sm-2">平台类型</p>
                    <div class="select-group fr col-sm-8 col-md-8">
                        <select class="form-control selectpicker">
                            <option>平台</option>
                            <option>高台</option>
                        </select>
                    </div>
                </li>
            </ul>
        </div>
        <div class="tiaoli">
            <input type="checkbox" name="" id="check" value="" class="icheckbox"/>
            <label for="check">&nbsp;&nbsp;&nbsp;我已阅读并同意<span>《库头互联出租库房委托协议》</span></label>
        </div>
        <a href="#loginmodal" id="modaltrigger">
            <input type="button" name="" id="" value="提交委托" class="submit-btn"/>
        </a>
    </div>
</div>

<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="index.html">
                <i class="iconfont icon-shouyev1"></i>
                <p>首页</p>
            </a>
        </li>
        <li class="active">
            <a href="lease.html">
                <i class="iconfont icon-chuzuwo"></i>
                <p>我要出租</p>
            </a>
        </li>
        <li>
            <a href="schedule.html">
                <i class="iconfont icon-richengbiao"></i>
                <p>看房日程</p>
            </a>
        </li>
        <li>
            <a href="sign.html">
                <i class="iconfont icon-gerenzhongxin"></i>
                <p>个人中心</p>
            </a>
        </li>
    </ul>
</footer>

<!--弹窗内容 star-->
<div id="loginmodal" class="box-s loginmodaltwo" style="display:none;">
    <form id="loginform" name="loginform" method="post" action="">
        <div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blutwo hidemodal" value=""
                                   tabindex="3"></div>
    </form>
    <div class="bottom clearfloat box-s">
        <div class="login-dui clearfloat">
            <p class="tu">
                <img src="images/dui.png"/>
            </p>
            <p class="tit">
                恭喜您，委托成功！
            </p>
            <p class="fu-tit">
                请保持所填号码手机的通话畅通状态，我们的客服将会在48小时内与您取得联系。
            </p>
        </div>
        <input type="button" name="" id="" value="好的，我知道了" class="btn btn1"/>
    </div>
</div>
<!--弹窗内容 end-->
</body>
<!--插件-->
<script src="plugins/jquery.min.js"></script>
<!--<script src="plugins/rem.js"></script>
<script src="plugins/fastclick.js"></script>
<script src="plugins/menu.js"></script>
<script src="plugins/hmt.js"></script>-->
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="plugins/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
<script src="plugins/bootstrap-fileupload/fileinput.min.js"></script>
<script src="plugins/bootstrap-fileupload/locales/zh.js"></script>
<script src="plugins/iCheck/icheck.min.js"></script>
<!--插件-->

<script>
    $(function () {
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        });
        var placeholder;
        $('input').focus(function () {
            placeholder = $(this).attr('placeholder');
            $(this).attr('placeholder', '');
        });
        $('input').blur(function () {
            if ($(this).val() == '') $(this).attr('placeholder', placeholder);
        });
        $('.icheckbox').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            incresaseArea: '80%'
        });
        $('.selectpicker').selectpicker({});
        $('#file').fileinput({
            language: 'zh',
//            uploadUrl: '/user/uploadAvatar',
            overwriteInitial: true,
            uploadAsync: true,
            maxFileSize: 1500,
            showClose: false,
            showCaption: false,
            showUpload: false,
            showRemove: true,
//            browseClass: "btn btn-primary",
            theme: 'fa',
            formData: [
//                {name: "csrfmiddlewaretoken", value: csrf_token}
            ],
            layoutTemplates: {footer: ''},
//            defaultPreviewContent: avatarImg.prop("outerHTML"),
            allowedFileExtensions: ["jpg", "jpge", "bmp", "png"]
        }).on("filebatchselected", function (event, files) {
            $(this).fileinput("upload");
        }).on("fileuploaded", function (event, data, previewId, index) {
            if (data.response)
                if (data.response.ret_status == 'ok') {
                    // console.debug(data.response.avatar);
                    $('#avatar').val(data.response.avatar);
                    $.Util.notifySuccess(data.response.ret_msg);
                } else {
                    $.Util.notifyWarn(data.response.ret_msg);
                }
        });
    })
</script>

</html>
